<template>
    <div class="path-index container">
        <header>
            <van-nav-bar v-if='pathStatus' title="添加地址" left-arrow @click-left="$router.back()" />
            <van-nav-bar v-else title="编辑地址" left-arrow @click-left="$router.back()" />
        </header>
        <section>
            <van-address-edit v-if='pathStatus' :area-list="areaList" show-set-default @save="onAdd" />

            <van-address-edit v-else :address-info='AddressInfo' :area-list="areaList" show-delete show-set-default
                show-search-result @save="onUpdate" @delete="onDelete" />
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue';
import { Toast } from 'vant';
import http from '@/common/api/request'
import { areaList } from '@vant/area-data';
export default {
    data() {
        return {
            pathStatus: false,
            AddressInfo: {},
            areaList
        }
    },
    components: { Tabbar },
    mounted() {
        let key = JSON.parse(this.$route.params.key);
        //是通过添加进来的
        if (key == 'add') {
            this.pathStatus = true;
        } else {//编辑进来的
            this.AddressInfo = key;
            this.AddressInfo.isDefault = this.AddressInfo.isDefault == 1 ? true : false;
        }
    },
    methods: {
        // 点击保存  ==》 增加
        onAdd(content) {
            content.isDefault = content.isDefault == true ? 1 : 0;
            http.$axios({
                url: '/api/addAddress',
                method: 'POST',
                headers: {
                    token: true
                },
                data: {
                    ...content
                }
            }).then(res => {
                if (!res.success) return;
                Toast(res.msg);
                this.$router.push('/path')
            })
        },
        // 点击保存 ==》 修改
        onUpdate(content) {
            content.isDefault = content.isDefault == true ? 1 : 0;
            http.$axios({
                url: '/api/updateAddress',
                method: 'POST',
                headers: {
                    token: true
                },
                data: {
                    ...content
                }
            }).then(res => {
                if (!res.success) return;
                Toast(res.msg);
                this.$router.push('/path')
            })
        },
        // 删除
        onDelete(content) {
            http.$axios({
                url: '/api/deleteAddress',
                method: 'POST',
                headers: {
                    token: true
                },
                data: {
                    id: content.id
                }
            }).then(res => {
                if (!res.success) return;
                Toast(res.msg)
                this.$router.push('/path')
            })
        },
        
    }
}
</script>

<style  scoped>
header {
    width: 100%;
    height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
    background-color: #fff;
}

::v-deep .van-nav-bar__title {
    color: #1b1b1b;
    font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size: 0.593333rem;
}

section {
    background-color: #F7F7F7;

}

::v-deep .van-cell {
    font-size: 16px;
    line-height: 24px;
}

::v-deep .van-address-edit {
    padding: 0;
}

::v-deep .van-address-edit__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

::v-deep .van-button--danger {
    width: 8rem;
    height: 1.066666rem;
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
}

::v-deep .van-button--default {
    width: 8rem;
    height: 1.066666rem;
}

::v-deep .van-switch--on {
    background-color: #ccc;
}

/* ::v-deep .tabbar{
    border-top:2px solid #ccc;
} */
</style>